<template>
  <div class="mTablets">
    <div class="mTablets-container">
      <div class="bottom-glass" v-if="showGlass != null && active == 0">
        {{ showGlass.width }}*{{ showGlass.height }},{{ showGlass.type }},{{
          showGlass.shelf
        }}{{
          showGlass.optGlass.processRequirements.length != 0
            ? ",【打孔挖缺】"
            : ""
        }}
      </div>
      <div class="bottom-glass arf" v-else>
        <div class="total" v-if="active == 0">
          总计:<span class="value" @click="handlerOpneDraw"
            >{{ glassList.length }}片/{{ totalArea }}m²</span
          >
        </div>
        <div class="text" v-if="active == 0">
          <i class="iconfont icon-shijiao" style="marginright: 20px"
            >(视角)俯瞰图</i
          >
          <i class="iconfont icon-danji" style="marginright: 20px"
            >(单击)查看玻璃尺寸</i
          >
          <i class="iconfont icon-shuangji">(双击)查看玻璃信息</i>
        </div>
        <div class="glassTotlaArea">
          <i
            class="el-icon-data-line"
            :class="active == 0 ? 'active' : ''"
            @click="active = 0"
          ></i>
          <i
            class="el-icon-s-operation"
            :class="active == 1 ? 'active' : ''"
            @click="active = 1"
          ></i>
        </div>
      </div>
      <div class="mTabletsLeft" v-if="active == 0">
        <div class="mTablets-box" v-for="item in 7" :key="item">
          <Tablets
            :gridNumber="item"
            :gridWidth="4000"
            :glassList="glassData[item]"
            @handlerClickEvent="handlerGlass"
            @handlerdbClickEvent="handlerDbGlass"
          />
        </div>
        <div class="mTablets-box">
          <img src="@/assets/images/lpl.png" alt="" />
        </div>
      </div>
      <bottomColor v-if="active == 0" />
      <div class="operation" v-if="active == 1">
        <CardCode />
      </div>
    </div>

    <el-dialog title="玻璃信息" :visible.sync="dialogVisible" width="45%">
      <GlassInfo
        v-if="dialogVisible"
        :glass="showGlass"
        @closeDialog="dialogVisible = false"
      />
    </el-dialog>
    <el-drawer title="数量统计" :visible.sync="drawer" :direction="direction">
      <div class="Box">
        <div class="select">
          <div
            class="Text"
            :class="check == 1 ? 'active' : ''"
            @click="check = 1"
          >
            按玻璃种类统计
          </div>
          <div
            class="Text"
            :class="check == 2 ? 'active' : ''"
            @click="check = 2"
          >
            按客户统计
          </div>
          <div
            class="Text"
            :class="check == 3 ? 'active' : ''"
            @click="check = 3"
          >
            按订单统计
          </div>
          <div
            class="Text"
            :class="check == 4 ? 'active' : ''"
            @click="check = 4"
          >
            按优化包统计
          </div>
        </div>
        <div class="View">
          <div class="item" v-for="item in Object.keys(typeMap)" :key="item">
            <div class="label">
              {{ item }}
            </div>
            <div class="value">
              {{ typeMap[item].number }} ({{
                Math.ceil(typeMap[item].area) / 100
              }}m²)
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import Tablets from "@/views/components/production/tabletsGrid.vue";
import GlassInfo from "@/views/components/production/glassInfo.vue";
import bottomColor from "@/views/components/production/bottomColor.vue";
import CardCode from "./components/CardCode.vue";
import { mapState } from "vuex";
export default {
  components: {
    Tablets,
    GlassInfo,
    bottomColor,
    CardCode,
  },
  data() {
    return {
      showGlass: null,
      dialogVisible: false,
      timer: null,
      drawer: false,
      direction: "rtl",
      check: 1,
      active: 0,
    };
  },
  methods: {
    handlerOpneDraw() {
      this.drawer = true;
    },
    handlerGlass(e) {
      this.showGlass = e;
    },
    handlerDbGlass(e) {
      if (e == null) return;
      this.dialogVisible = true;
    },
  },
  mounted() {
    this.$store.dispatch("listGlass", '1144');
    this.timer = setInterval(() => {
      this.$store.dispatch("listGlass", '1144');
    }, 20000);
  },
  computed: {
    ...mapState({
      glassList(state) {
        return state.Glass.glass.filter((item) => item.place == 1144);
      },
    }),
    glassData() {
      let glassMap = {
        1: [],
        2: [],
        3: [],
        4: [],
        5: [],
        6: [],
        7: [],
      };
      this.glassList.forEach((item) => {
        let gridValue = Math.ceil(item.grid / 50);
        glassMap[gridValue].push(item);
      });
      return glassMap;
    },
    totalArea() {
      return (
        Math.ceil(
          this.glassList.reduce((a, b) => {
            return a * 1 + b.width * b.height * 1;
          }, 0) / 10000
        ) / 100
      );
    },
    typeMap() {
      let arr = {};
      if (this.check == 1) {
        this.glassList.forEach((item) => {
          if (!arr.hasOwnProperty(item.type)) {
            arr[item.type] = {};
            arr[item.type].number = 1;
            arr[item.type].area = (item.width * item.height) / 10000;
          } else {
            arr[item.type].number += 1;
            arr[item.type].area += (item.width * item.height) / 10000;
          }
        });
      } else if (this.check == 3) {
        this.glassList.forEach((item) => {
          let text =
            item.optGlass.processRequirements == ""
              ? "普通"
              : item.optGlass.processRequirements;
          if (!arr.hasOwnProperty(text)) {
            arr[text] = {};
            arr[text].number = 1;
            arr[text].area = (item.width * item.height) / 10000;
          } else {
            arr[text].number += 1;
            arr[text].area += (item.width * item.height) / 10000;
          }
        });
      } else if (this.check == 2) {
        this.glassList.forEach((item) => {
          if (!arr.hasOwnProperty(item.clientName)) {
            arr[item.clientName] = {};
            arr[item.clientName].number = 1;
            arr[item.clientName].area = (item.width * item.height) / 10000;
          } else {
            arr[item.clientName].number += 1;
            arr[item.clientName].area += (item.width * item.height) / 10000;
          }
        });
      } else if (this.check == 4) {
        this.glassList.forEach((item) => {
          if (!arr.hasOwnProperty(item.optGlass.spareFieldStr5)) {
            arr[item.optGlass.spareFieldStr5] = {};
            arr[item.optGlass.spareFieldStr5].number = 1;
            arr[item.optGlass.spareFieldStr5].area =
              (item.width * item.height) / 10000;
          } else {
            arr[item.optGlass.spareFieldStr5].number += 1;
            arr[item.optGlass.spareFieldStr5].area +=
              (item.width * item.height) / 10000;
          }
        });
      }

      return arr;
    },
  },
  destroyed() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-drawer__header {
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 10%);
  margin-bottom: 0px;
  padding-bottom: 20px;
  background-color: #f1f3f4;
  font-weight: bold;
  font-size: 17px;
}
.operation{
  flex: 1;
}
.Box {
  display: flex;
  flex-direction: column;

  .select {
    display: flex;
    border-bottom: 1px solid #e6e6e6;
    .Text {
      flex: 1;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: bold;
      border-right: 1px solid #e6e6e6;
      cursor: pointer;
    }
    .active {
      background: linear-gradient(#fafafa, #1890ff);
    }
  }
  .View {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 5px 5px;
    .item {
      width: 100%;
      display: flex;
      margin-bottom: 5px;
      align-items: center;
      .label {
        font-size: 17px;
        font-weight: bold;
      }
      .value {
        margin-left: auto;
      }
    }
  }
}
.mTablets {
  height: 100%;
  min-height: 100%;
  padding: 0 5px;
  overflow: hidden;
  .mTablets-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .mTabletsLeft {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      .mTablets-box {
        position: relative;
        width: 24.7%;
        height: 49.5%;
        display: flex;
        align-items: center;
        img {
          width: 95%;
          height: 100%;
          margin: 0 2.5%;
        }
      }
    }
    .bottom-glass {
      position: relative;
      min-height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 99.4%;
      background-color: yellow;
      font-size: 24px;
      font-weight: bold;
      margin: 2px 5px;
      letter-spacing: 1px;
      .total {
        position: absolute;
        height: 100%;
        left: 0;
        bottom: 0;
        font-size: 18px;
        font-weight: 500;
        letter-spacing: 0;
        display: flex;
        align-items: center;
      }
      .value:hover {
        text-decoration: underline;
        color: blue;
        cursor: pointer;
      }
      .text {
        i {
          margin-right: 15px;
          letter-spacing: 3px;
          font-weight: bold;
          font-size: 24px;
        }
      }
      .glassTotlaArea {
        position: absolute;
        right: 0;
        bottom: 0;
        font-size: 24px;
        font-weight: 500;
        letter-spacing: 0;
        cursor: pointer;
        i {
          width: 40px;
          height: 40px;
          text-align: center;
          line-height: 40px;
        }
        i:hover {
          background-color: #1890ff;
          color: #fff;
        }
        .active {
          background-color: #1890ff;
          color: #fff;
        }
      }
    }
  }
  .arf {
    background-color: #fafafa !important;
    // color: #dee1e6;
  }
}
::v-deep .el-dialog__body {
  padding: 20px 20px;
}
</style>
